<template> <div class="page-container">
  <div class="toolbar">
     <el-row>
      <el-tabs type="border-card">
       <el-tab-pane label="基本信息">
       <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm" :rules="dataFormRules" :disabled="this.$route.query.disabled" class="form">
       <el-row style="margin-top: -20px;">
       <el-divider content-position="center">
        <span style="font-size:16px;font-weight:800">基本信息</span>
       </el-divider>

       <el-form-item label="" v-show="false" prop="id" >
        <el-input v-model="dataForm.id" placeholder="请输入" ></el-input>
       </el-form-item>
       <el-form-item label="部门ID"  prop="deptId" >
        <el-input v-model="dataForm.deptId" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="BD部门编码"  prop="bdCode" >
        <el-input v-model="dataForm.bdCode" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="平台编码"  prop="platformCode" >
        <el-input v-model="dataForm.platformCode" placeholder="请输入"></el-input>
       </el-form-item>   
        <el-form-item label="积分类型：" prop="pointType">
          <!--<el-select v-model="dataForm.pointType"  clearable placeholder="积分类型">
            <el-option label="交易积分" value="1"></el-option>
            <el-option label="交互积分" value="2"></el-option>
            <el-option label="现金积分" value="3"></el-option>
            <el-option label="定向积分" value="4"></el-option>              
          </el-select>-->
          <template slot-scope="scope">
            <el-input :value="pointType[dataForm.pointType]"></el-input>
          </template>
        </el-form-item>       
        <el-form-item label="发放类型：" prop="deliveryType">
          <!--<el-select v-model="dataForm.deliveryType"  clearable placeholder="发放类型">
            <el-option label="积分卡" value="1"></el-option>
            <el-option label="线上" value="2"></el-option>                
          </el-select>-->
          <template slot-scope="scope">
            <el-input :value="deliveryType[dataForm.deliveryType]"></el-input>
          </template>
        </el-form-item>      
       <el-form-item label="类型：" prop="type">
          <!--<el-select v-model="dataForm.type"  clearable placeholder="类型">
            <el-option label="新增" value="1"></el-option>
            <el-option label="减少" value="2"></el-option>
            <el-option label="冻结" value="3"></el-option>                  
          </el-select>-->
         <template slot-scope="scope">
           <el-input :value="type[dataForm.type]"></el-input>
         </template>
        </el-form-item> 
       <el-form-item label="数量"  prop="amount" >
        <el-input v-model="dataForm.amount" placeholder="请输入"></el-input>
       </el-form-item>
       <!-- <el-form-item label="描述"  prop="description" >
        <el-input v-model="dataForm.description" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="创建时间"  prop="createTime" >
        <el-input v-model="dataForm.createTime" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="更新时间"  prop="updateTime" >
        <el-input v-model="dataForm.updateTime" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="创建用户"  prop="creator" >
        <el-input v-model="dataForm.creator" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="更新用户"  prop="updater" >
        <el-input v-model="dataForm.updater" placeholder="请输入"></el-input>
       </el-form-item>     
       <el-form-item label="是否删除：">
          <el-select v-model="dataForm.deleteFlag"   clearable placeholder="是否删除">
            <el-option label="不删除" value="0"></el-option>
            <el-option label="删除" value="1"></el-option>                
          </el-select>
        </el-form-item> -->
       </el-row>
      </el-form>
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="submitForm()" v-show="!this.$route.query.disabled">保存</el-button>
         <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
        </el-button-group>
       </div>
      </div>
     </el-tab-pane>
    </el-tabs>
   </el-row>
  </div>
 </div>
</template>
<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import { mapState } from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from "v-distpicker";
import elTree from "@/views/tree/src/tree.vue";

//二.数据输出区
export default {
  //2.1 注册组件
  components: {
    jicTable,
    ThemePicker,
    LangSelector,
    VDistpicker,
    elTree
  },

  //2.2 数据初始化区
  data() {
    return {
      //2.2.1 公共数据初始化
      searchSize: "mini",

      pointType: ["无", "交易积分", "交互积分", "现金积分", "定向积分"],

      deliveryType: ["无", "积分卡", "线上"],

      type: ["无", "新增", "减少", "冻结"],

      // 2.2.2 form 表单数据初始化
      dataForm: {
        id: null,
        deptId: null,
        bdCode: null,
        platformCode: null,
        pointType: null,
        deliveryType: null,
        type: null,
        amount: null,
        description: null,
        createTime: null,
        updateTime: null,
        creator: null,
        updater: null,
        deleteFlag: null
      },
      //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
      dataFormRules: {
        id: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "请输入部门ID", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        bdCode: [
          {
            required: true,
            message: "请输入从哪个部门划拨的来源",
            trigger: "blur"
          },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        platformCode: [
          { required: true, message: "请输入平台编码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        pointType: [
          {
            required: true,
            message:
              "请输入积分类型（1、交易积分；2、交互积分;3、现金积分；4、定向积分；）",
            trigger: "blur"
          },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        deliveryType: [
          {
            required: true,
            message: "请输入发放类型（1、积分卡；2、线上）",
            trigger: "blur"
          },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        type: [
          {
            required: true,
            message: "请输入类型（1、新增；2、减少；3、冻结）",
            trigger: "blur"
          },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        amount: [
          { required: true, message: "请输入数量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        createTime: [
          { required: true, message: "请输入创建时间", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        updateTime: [
          { required: true, message: "请输入更新时间", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        creator: [
          { required: true, message: "请输入创建用户", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        updater: [
          { required: true, message: "请输入更新用户", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        deleteFlag: [
          {
            required: true,
            message: "请输入是否删除：0不删除， 1删除 ",
            trigger: "blur"
          },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ]
      }
      //dialogVisible: false, //// 是否显示弹窗内容;
      //editDialogVisible1: false,//// 是否可编辑弹窗内容;
      //editLoading: false,////是否显示加载时动画效果;
    }; //return 完结;
  }, //data()方法 完结;

  //2.3 Vue 方法区
  methods: {
    //2.3.1 公共方法区

    //2.请求列表数据
    getDetail() {
      let this_ = this;
      if (
        this.$route.query != null &&
        this.$route.query.id != null &&
        this.$route.query.id != "" &&
        this.$route.query.id != "null" &&
        this.$route.query.id != "undefined"
      ) {
        let params = {};
        params.id = this.$route.query.id;
        this.utils.request.getConfPlatformLogDetail(params, function(res) {
          if (res.code === "0000") {
            this_.dataForm = res.data;
          } else {
            this_.$message({ message: "操作失败, " + data.msg, type: "error" });
          }
        });
      }
    },

    submitForm: function() {
      let this_ = this;
      this_.$refs.dataForm.validate(valid => {
        if (valid) {
          this_.$confirm("确认提交吗？", "提示", {}).then(() => {
            this_.editLoading = true;
            let params = this.dataForm;
            this_.utils.request.saveConfPlatformLog(params, function(res) {
              if (res.code === "0000") {
                this_.$message({ message: "操作成功", type: "success" });
              } else {
                this_.$message({ message: "操作失败", type: "error" });
              }
            });
            this_.$router.go(-1);
          });
        }
      });
    },
    // 7.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 8.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    /*图片预览*/
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /*图片移除*/
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    back() {
      this.$router.go(-1);
    }
    //==========2.3.1 JavaScript 自定义方法区==========
  },
  //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
  mounted() {
    this.getDetail();
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
